<template>
	<div class="w-100 overflow-scroll hideScrollBar" @scroll="handleScroll" :style="{ height: 'calc(100vh - 75px - 60px - 38px - 1.5rem)' }">
		<div class="mt-3">
			<div v-for="filter in filters" :key="filter.key">
				<div class="d-flex">
					<span class="catKey flex-center flex-shrink-0 px-3">{{ filter.cat }}：</span>
					<span>
						<span
							@click="filter.values = filter.values.map((item, index) => ({ ...item, active: valueIndex === index ? true : false }))"
							v-for="(value, valueIndex) in filter.values"
							class="catNameContainer cursor-pointer mb-4 d-inline-flex justify-content-between align-items-center"
							:key="value.code"
						>
							<span class="opacity: 0;"></span>
							<span class="catName d-inline-block px-3 rounded-pill" :class="{ activeCatName: value.active }">{{ value.name }}</span>
							<Divider :opacity="valueIndex !== filter.values.length - 1 ? 0.5 : 0" />
						</span>
					</span>
				</div>
			</div>
		</div>
		<div class="d-flex justify-content-between flex-wrap">
			<ArtistItem
				@click="$router.push({ name: 'artistDetail', query: { id: artist.id } })"
				class="mb-5"
				v-for="artist in artists"
				:key="artist.id"
				:name="artist.name"
				:picUrl="artist.picUrl"
			/>
		</div>
	</div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, toRefs, watch } from "vue";
import { ArtistListApiParams, getArtistListApi } from "@/api/artist";
import { AxiosResponseProps } from "@/utils/request";
import { scrollToBottom } from "@/utils/document";
export default defineComponent({
	setup() {
		type Artist = any[];
		interface ArtistListResponse extends AxiosResponseProps {
			artists: Artist;
		}
		type Filters = {
			key: string;
			cat: string;
			values: {
				name: string;
				code: number | string;
				active?: boolean;
			}[];
		}[];
		interface State {
			artists: Artist;
			filters: Filters;
		}
		const state = reactive<State>({
			artists: [],
			filters: [
				{
					key: "area",
					cat: "语种",
					values: [
						{ name: "全部", code: -1, active: true },
						{ name: "华语", code: 7 },
						{ name: "欧美", code: 96 },
						{ name: "日本", code: 8 },
						{ name: "韩国", code: 16 },
						{ name: "其他", code: 0 },
					],
				},
				{
					key: "type",
					cat: "分类",
					values: [
						{ name: "全部", code: -1, active: true },
						{ name: "男歌手", code: 1 },
						{ name: "女歌手", code: 2 },
						{ name: "乐队", code: 3 },
					],
				},
				{
					key: "initial",
					cat: "筛选",
					values: [
						{ name: "热门", code: -1, active: true },
						...new Array(26).fill(null).map((item, index) => {
							const name = String.fromCharCode(index + 65);
							const code = name;
							return { name, code };
						}),
						{ name: "#", code: 0 },
					],
				},
			],
		});
		const getArtistList = (params?: ArtistListApiParams) => {
			getArtistListApi(params).then((res: Partial<ArtistListResponse>) => {
				if (res.code === 200) {
					state.artists = res.artists;
				}
			});
		};
		const currentParams = () =>
			state.filters
				.map((item) => item.values.filter((item1) => item1.active).map((item2) => ({ [item.key]: item2.code })))
				.reduce((prev, item3) => ({ ...prev, ...item3[0] }), {});
		watch(
			currentParams,
			(params) => {
				offset = 0;
				getArtistList(params);
			},
			{
				immediate: true,
			}
		);
		let offset = 0;
		let isRequesting = false;
		const concatArtists = () => {
			if (isRequesting) return;
			isRequesting = true;
			offset += 30;
			getArtistListApi({ ...currentParams(), offset })
				.then((res: Partial<ArtistListResponse>) => {
					if (res.code === 200) {
						state.artists = [...state.artists, ...res.artists];
					}
				})
				.finally(() => {
					isRequesting = false;
				});
		};
		const scrollInstance = scrollToBottom();
		const handleScroll = (e) => {
			scrollInstance(e.target, () => {
				concatArtists();
			});
		};
		return {
			...toRefs(state),
			getArtistList,
			handleScroll,
		};
	},
});
</script>

<style scoped lang="scss">
.catKey {
	height: 20px;
}
.catNameContainer {
	width: 66px;
	height: 18px;
}
.primaryTheme {
	.activeCatName {
		color: $primary;
		background-color: rgba($color: $primary, $alpha: 0.15);
	}
}
.darkTheme {
	.activeCatName {
		color: white;
		background-color: rgba($color: $dark, $alpha: 0.3);
	}
}
.freeTheme {
	.activeCatName {
		color: $free;
		background-color: rgba($color: $free, $alpha: 0.15);
	}
}
</style>
